<template>
  <div class="container" id="scroll">
    <!-- 下拉刷新 -->
    <van-pull-refresh
      success-text="加载完成"
      success-duration="800"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        height="210"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item v-for="item in banners" :key="item.banner_id"
          ><van-image fit="cover" position="right" :src="item.banner_url"
        /></van-swipe-item>
      </van-swipe>

      <!-- Search 搜索 -->
      <!-- 点击跳转之后在拿数据 -->
      <!-- 滑到一定距离显示 -->
      <div class="search" id="search" style="display: none">
        <van-search
          class="search1"
          shape="round"
          placeholder="请输入搜索关键词"
          background="var(--color-primary)"
          @click="$router.push(`/search`)"
        >
        </van-search>
      </div>

      <!-- 图片地址，后端交互 渲染 -->
      <!-- 展示框exhibition -->
      <div class="exhibition">
        <div class="exhibition-1">
          <van-image
            radius="3"
            fit="cover"
            src="https://img.alicdn.com/bao/uploaded/i3/2758433361/O1CN012QE9QN1ahNygz055R_!!0-item_pic.jpg_240x240.jpg"
          />
          <br />
          <p>水果罐头</p>
        </div>
        <div class="exhibition-1 exhibi">
          <van-image
            radius="3"
            fit="cover"
            src="https://img.alicdn.com/bao/uploaded/i4/2758433361/O1CN010d2LzO1ahNx7vL8Iy_!!0-item_pic.jpg_180x180.jpg"
          />
          <br />
          <p>鱼罐头</p>
        </div>
        <div class="exhibition-1">
          <van-image
            radius="3"
            fit="cover"
            src="https://img.alicdn.com/bao/uploaded/i1/2758433361/O1CN01IY1zFv1ahNyGyMONi_!!0-item_pic.jpg_240x240.jpg"
          />
          <br />
          <p>港式甜品</p>
        </div>
        <div class="exhibition-1 exhibi">
          <van-image
            radius="3"
            fit="cover"
            src="https://img.alicdn.com/bao/uploaded/i1/2758433361/O1CN01C5Y6kX1ahNy5ttSHs_!!0-item_pic.jpg_180x180.jpg"
          />
          <br />
          <p>肉罐头</p>
        </div>
        <div class="exhibition-1">
          <van-image
            radius="3"
            fit="cover"
            src="https://img.alicdn.com/bao/uploaded/i4/2758433361/O1CN01LuMRCO1ahNydJWHiA_!!0-item_pic.jpg_180x180.jpg"
          />
          <br />
          <p>年货礼盒</p>
        </div>
      </div>

      <!-- 活动activity展示面板 抽奖、促销 -->
      <div class="activity">
        <div class="activity-erzi">
          <div class="activity-1">
            <van-image
              height="100%"
              fit="contain"
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg13.360buyimg.com%2Fn1%2Fjfs%2Ft3469%2F162%2F370105009%2F150029%2F39bf227c%2F58075bceN58fe08eb.jpg&refer=http%3A%2F%2Fimg13.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674747656&t=257571b0d303b0fd6f565a9abf3bd5fb"
            />
          </div>
          <div class="activity-2">
            <div>
              <strong style="color: var(--color-grey-three)">秒杀</strong>
              <span style="color: var(--color-grey-three)">黄桃罐头</span>
              <br />
              <br />
              <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
            </div>
            <div></div>
          </div>
          <div class="activity-3">
            <van-button
              class="activity-3-1"
              round
              color="var(--color-primary)"
              @click="$router.push('/IndexShopDetail')"
              >点击参加</van-button
            >
          </div>
        </div>
      </div>

      <!-- 热销臻品 -->
      <div class="HotSell">
        <div class="HotSell-1"></div>
        <div class="text">
          <p><span>热销臻品</span></p>
        </div>
      </div>

      <!-- 左边轮播图→_→右边竖着列表 -->
      <div class="HotSellContent">
        <div class="HotSellContent-1">
          <van-swipe
            height="255"
            class="my-swipe"
            :autoplay="3000"
            indicator-color="white"
          >
            <van-swipe-item>
              <van-image
                height="100%"
                fit="cover"
                src="https://www.517lppz.com/media/upload/L/a9.jpg"
              />
            </van-swipe-item>
            <van-swipe-item>
              <van-image
                height="100%"
                fit="cover"
                src="https://www.517lppz.com/media/upload/L/a2.jpg"
              />
            </van-swipe-item>
            <van-swipe-item>
              <van-image
                height="100%"
                fit="cover"
                src="https://www.517lppz.com/media/upload/L/a5.jpg"
              />
            </van-swipe-item>
            <van-swipe-item>
              <van-image
                height="100%"
                fit="cover"
                src="https://www.517lppz.com/media/upload/L/a1.jpg"
              />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="HotSellContent-2">
          <ShopItemHot
            v-for="item in shophots"
            :key="item.goods_id"
            :shop="item"
          ></ShopItemHot>
        </div>
      </div>
      <!-- 人气新品  -->
      <div class="NewProduct">
        <div class="NewProduct-1"></div>
        <div class="text">
          <p><span>人气新品</span></p>
        </div>
      </div>
      <!-- 竖着列表 -->
      <div class="NewProductContent">
        <ShopItemNew
          v-for="item in shopnews"
          :key="item.goods_id"
          :shop="item"
        ></ShopItemNew>
      </div>

      <!-- 更多推荐 全部商品  -->
      <div class="more">
        <div class="more-1"></div>
        <div class="text">
          <p><span>更多推荐</span></p>
        </div>
      </div>
      <!-- 竖着列表 触底加载 -->
      <div class="morelist">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell>
            <ShopItem
              v-for="item in shops"
              :key="item.goods_id"
              :title="item.goods_name"
              :shop="item"
            ></ShopItem>
          </van-cell>
        </van-list>
        <!-- BackTop 回到顶部 -->
        <van-back-top style="margin-bottom: 50px" />
      </div>
    </van-pull-refresh>
  </div>
</template>
<script setup lang="ts">
import '@/assets/css/reset.css'
import '@/assets/css/base.css'
import { onMounted, ref, reactive, onUnmounted, onBeforeMount } from 'vue'
import httpApi from '@/http'
import Shop from '@/types/Shop'
import Banner from '@/types/Banner'
import { useRouter } from 'vue-router'
// 获取轮播图，展示图片
const banners = reactive<Banner[]>([])
onMounted(() => {
  httpApi.bannerApi.queryAll().then(res => {
    console.log('轮播图', res)
    let banner: Banner[] = res.data.data
    console.log('轮播图数组', banner)

    banners.push(...banner)
    console.log(banners)
  })
})

const time = ref(30 * 60 * 60 * 1000)
const loading = ref(false)
const finished = ref(false)
const router = useRouter()
const Dpath = router.currentRoute.value.path
const shops = reactive<Shop[]>([])
const pno = ref(1)
const onLoad = () => {
  let params = { pno: pno.value++, pageSize: 8 }
  httpApi.commodityApi.queryPagingAll(params).then(res => {
    console.log('全部商品', res)
    let shop: Shop[] = res.data.data
    shops.push(...shop)
    console.log('shops', shops)
    loading.value = false

    console.log('结束', shops.length)
    // 数据全部加载完成
    if (shop.length === 0) {
      finished.value = true
      return
    }
  })

  console.log('到底了，加载下一页。。。')
}
// 处理下拉刷新业务
const refreshing = ref(false)
function onRefresh() {
  // 下拉刷新，释放后执行将自动设置refreshing.value = true
  console.log('onRefresh')
  // 加载当前类别下的首页列表
  // movies.length = 0 //将数组清空
  pno.value = 1 //页面初始化
  // onLoad()
  let params = { pno: pno.value++, pageSize: 8 }
  httpApi.commodityApi.queryPagingAll(params).then(res => {
    console.log('下拉刷新全部商品', res)
    let shop: Shop[] = res.data.data
    shops.push(...shop)
    console.log('shops下拉', shops)
    // 下拉刷新数据加载已完成
    refreshing.value = false
  })

  refreshing.value = false
  onMounted(() => {
    console.log('mounted...')
  })
}
function add() {
  const scrollTop = document.documentElement.scrollTop

  if (scrollTop < 88) {
    console.log('1234')

    document.getElementById('search')!.style.display = 'none'
  }
  if (scrollTop >= 88) {
    document.getElementById('search')!.style.display = 'block'
  }
}
window.addEventListener('scroll', add)

const shophots = reactive<Shop[]>([])
onMounted(() => {
  // 商品前三查询信息
  httpApi.commodityApi.querySanAll().then(res => {
    console.log('商品前三查询信息', res)
    let shophot: Shop[] = res.data.data
    shophots.push(...shophot)
  })
})

const shopnews = reactive<Shop[]>([])
onMounted(() => {
  //商品人气新品查询信息
  let params = { is_new: 1 }
  httpApi.commodityApi.queryNewAll(params).then(res => {
    console.log('商品人气新品查询信息', res)
    let shopnew: Shop[] = res.data.data
    shopnews.push(...shopnew)
  })
})

onUnmounted(() => {
  console.log('onUnmounted')
  window.removeEventListener('scroll', add)
})
</script>

<style scoped lang="scss">
/* 总页面 */
.container {
  position: relative;
  margin-bottom: 50px;
  background-color: var(--color-grey-three);
}
/* 轮播图 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: var(--color-grey-three);
}
/* 搜索栏 */
.search {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 88px;
  background-color: var(--color-primary);
  .search1 {
    position: fixed;
    left: 16px;
    right: 16px;
    height: 30px;
    top: 50px;
  }
}

/* 展示框exhibition */
.exhibition {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px;
  .exhibition-1 {
    image {
      border-radius: 5px;
    }

    width: calc((100% - 80px) / 5);
  }
  .exhibi {
    margin: 0 5px 0;
  }
  div {
    flex: 1;
  }
  p {
    text-align: center;
  }
}
/* 活动activity */
.activity {
  width: 100%;
  cursor: pointer;
  padding: 8px;
  .activity-erzi {
    padding: 0 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 100px;
    background: transparent;
    background: linear-gradient(
      90.7044974050849deg,
      rgba(255, 166, 138, 1) 0%,
      rgba(251, 88, 0, 1) 46%,
      rgba(253, 97, 97, 1) 100%
    );
    border-radius: 2px;
    box-shadow: 0px 0px 5px rgb(255 106 0);

    position: relative;
    .activity-1 {
      padding: 5px 0;
      line-height: 100px;
    }
    .activity-2 {
      flex: 1;
      position: absolute;
      top: 50%;
      margin-top: -30px;
      left: 50%;
      margin-left: -73px;
    }
    .activity-3 {
      line-height: 100px;
      .activity-3-1 {
        height: 30px;
        border: 1px solid var(--color-grey-three) !important;
      }
    }
  }
}
// 热销臻品
.HotSell {
  width: 100%;
  height: 44px;
  line-height: 44px;
  display: flex;
  font-size: 16px;
  text-align: left;
  box-shadow: 0px 0px 24px 0px rgb(255 106 0 / 30%) inset;
  position: relative;
  padding-left: 32px;
  .HotSell-1 {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 50%;
    margin-left: -8px;
    left: 16px;
    width: 8px;
    height: 16px;
    display: flex;
    background-color: rgba(255, 106, 0, 1);
    border-radius: 19px;
  }
}
// 左边轮播图→_→右边竖着列表
.HotSellContent {
  display: flex;
  flex-direction: row;
  .HotSellContent-1 {
    width: calc(100% / 3);
  }
  .HotSellContent-2 {
    width: calc(100% * 2 / 3);
  }
}
// 人气新品
.NewProduct {
  width: 100%;
  height: 44px;
  line-height: 44px;
  display: flex;
  font-size: 16px;
  text-align: left;
  box-shadow: 0px 0px 24px 0px rgb(255 106 0 / 30%) inset;
  position: relative;
  padding-left: 32px;
  .NewProduct-1 {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 50%;
    margin-left: -8px;
    left: 16px;
    width: 8px;
    height: 16px;
    display: flex;
    background-color: rgba(255, 106, 0, 1);
    border-radius: 19px;
  }
}
// 更多推荐
.more {
  width: 100%;
  height: 44px;
  line-height: 44px;
  display: flex;
  font-size: 16px;
  text-align: left;
  box-shadow: 0px 0px 24px 0px rgb(255 106 0 / 30%) inset;
  position: relative;
  padding-left: 32px;
  .more-1 {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    left: 50%;
    margin-left: -8px;
    left: 16px;
    width: 8px;
    height: 16px;
    display: flex;
    background-color: rgba(255, 106, 0, 1);
    border-radius: 19px;
  }
}
// 全部商品列表
.van-cell {
  padding: 0;
}

.morelist {
  // border-top: 10px solid #fff;
}
</style>
